<template>
  <div>
    <div>
      <div>项目名：{{project.name}}</div>
      <div>所属学院：{{project.college.name}}</div>
      <div>立项时间：{{project.createTime}}</div>
      <div>项目状态：{{getProjectState(project.state)}}</div>
      <!--			<button>审批通过（学院申请期管理员可见，跳转到审批界面）</button>-->
      <!--			<button>申请结项（项目存续期学院可见，跳转到申请界面）</button>-->
      <!--			<button>审批结项（学院发起结项后管理员可见，跳转到审批界面）</button>-->
      <!--			<button>开始捐款（项目存续期管理员可见，跳转到捐款界面）</button>-->
      <!--			<button>申请资金（项目存续期学院可见，跳转到MoneyApply）</button>-->
      <!--			<button>审批资金（项目存续期学院可见，跳转到ShenpiExpense）</button>-->
      <div>项目详情：{{project.profile}}</div>
      <div>申请文件下载：
        <el-button @click="download(project.catForUrl)">点击下载</el-button>
      </div>
      <div v-if="project.state >= 1">审批文件下载：
        <el-button @click="download(project.approveUrl)">点击下载</el-button>
      </div>
      <div v-if="project.state >= 2">结项文件下载：
        <el-button @click="download(project.closeUrl)">点击下载</el-button>
      </div>
      <div v-if="project.state == 1 && power == 2">
        <el-button @click="close_project">结项</el-button>
      </div>
    </div>
    <div v-if="!(project.state === 0)">
      <div>
        <el-divider content-position="left">爱心墙</el-divider>
      </div>
      <div v-if="project.state == 1 && power == 2" class="ss">
        <el-button @click="addIncome">增加捐款</el-button>
      </div>
      <el-table
        :data="project.incomes"
        style="width: 100%"
      >
        <el-table-column
          prop="createTime"
          label="捐赠时间"
          sortable/>
        <el-table-column
          prop="money"
          label="捐赠额"
          sortable
        />

        <el-table-column
          prop="name"
          label="捐赠人姓名"
        />
        <el-table-column
          prop="state.show"
          label="捐赠状态"
        />
        <el-table-column
          label="文件下载"
          width="500%"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.protocolRootUrl != null"
              @click.native.prevent="download(scope.row.protocolRootUrl)"
              type="text"
              size="small">
              协议原稿下载
            </el-button>
            <el-button
              v-if="scope.row.goodPeopleFile != null"
              @click.native.prevent="download(scope.row.goodPeopleFile)"
              type="text"
              size="small">
              捐赠方文件下载
            </el-button>
            <el-button
              v-if="scope.row.foundationFile != null"
              @click.native.prevent="download(scope.row.foundationFile)"
              type="text"
              size="small">
              基金会审批文件下载
            </el-button>
            <el-button
              v-if="scope.row.bankFile != null"
              @click.native.prevent="download(scope.row.bankFile)"
              type="text"
              size="small">
              银行收据下载
            </el-button>
            <el-button
              v-if="scope.row.riteUrl != null"
              @click.native.prevent="download(scope.row.riteUrl)"
              type="text"
              size="small">
              捐赠仪式照片下载
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          v-if="project.state == 1 &&power == 2"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state.value == 0"
              @click.native.prevent="setIncome(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              上传原始协议文件
            </el-button>
            <el-button
              v-if="scope.row.state.value == 1"
              @click.native.prevent="setIncome(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              上传捐赠方审批文件
            </el-button>
            <el-button
              v-if="scope.row.state.value == 2"
              @click.native.prevent="setIncome(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              上传基金会审批文件
            </el-button>
            <el-button
              v-if="scope.row.state.value == 3"
              @click.native.prevent="setIncome(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              上传银行收据
            </el-button>
            <el-button
              v-if="scope.row.state.value == 4"
              @click.native.prevent="setIncome(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              上传捐赠仪式照片
            </el-button>
          </template>
        </el-table-column>
        <!--fixed="right"-->
      </el-table>
      <div>
        <el-divider content-position="left">支出公示</el-divider>
      </div>
      <div v-if="project.state == 1 && power == 1" class="ss">
        <el-button @click="addExpend">增加支出</el-button>
      </div>
      <el-table
        :data="project.expends"
        style="width: 100%"
      >
        <el-table-column
          prop="createTime"
          label="支出时间"
          sortable>
        </el-table-column>
        <el-table-column
          prop="money"
          label="支出钱数"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="支出名目"
        />
        <el-table-column
          prop="state.show"
          label="捐赠状态"
        />
        <el-table-column
          label="文件下载"
          width="500%"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.applyUrl != null"
              @click.native.prevent="download(scope.row.applyUrl)"
              type="text"
              size="small">
              申请证明下载
            </el-button>
            <el-button
              v-if="scope.row.passUrl != null"
              @click.native.prevent="download(scope.row.passUrl)"
              type="text"
              size="small">
              审批通过文件下载
            </el-button>
            <el-button
              v-if="scope.row.expendUrl != null"
              @click.native.prevent="download(scope.row.expendUrl)"
              type="text"
              size="small">
              支出凭据下载
            </el-button>

          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          v-if="project.state == 1 &&power == 2"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state.value == 0"
              @click.native.prevent="setExpend(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              审批通过
            </el-button>
            <el-button
              v-if="scope.row.state.value == 1"
              @click.native.prevent="setExpend(scope.row.id,scope.row.state.value)"
              type="text"
              size="small">
              上传支出凭据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="(project.state === 0)&&(power == 2)">
      <div class="container">
        <div class="top">上传审批文件：</div>
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :before-upload="beforeUploads"
          :http-request="doPut"
        >
          <img v-if="project.approveUrl" :src="project.approveUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <el-button style="margin-top: 50px" @click="pass">确认</el-button>
    </div>
  </div>

</template>

<script>
  import Convert from '../assets/js/Convert'
  import Utils from "../assets/js/Utils"
  import OSS from 'ali-oss'

  export default {
    name: "projects",
    data() {
      return {
        power : -1,
        project: {}
      }
    },
    methods: {
      getProjectState(state) {
        return Convert.ProjectState(state)
      },
      getData() {
        this.$post({
          url: "project/admin/one",
          data: {
            id: Utils.GetQueryString("project_id")
          }
        }).then(res => {
          res.incomes.forEach((item, index) => {
            let state = {
              value: item.state,
              show: Convert.IncomeState(item.state)
            }
            item.state = state
          })

          res.expends.forEach((item, index) => {
            let state = {
              value: item.state,
              show: Convert.ExpendState(item.state)
            }
            item.state = state
          })

          this.project = res
        }).catch(err => {

        })
      },
      download(url1) {
        this.$post({
          url: "sts/sign"
        }).then(res => {
          let ossClient = new OSS({
            region: 'oss-cn-qingdao',
            accessKeyId: res.accessKeyId,
            accessKeySecret: res.accessKeySecret,
            stsToken: res.securityToken,
            bucket: 'lius-1'
          })
          let snum = url1.lastIndexOf('/')
          url1 = url1.substr(snum + 1, url1.length)
          console.log(url1)
          let url = ossClient.signatureUrl("imgs/"+url1, {
            response: {
              'content-disposition': 'attachment; filename=test.jpg'
            }
          })
          console.log(url)

          let a = document.createElement('a')
          let event = new MouseEvent('click')
          a.href = url
          a.download = 'test'
          a.dispatchEvent(event)
        }).catch(err => {
          console.log(err)
        })
      },
      addIncome() {
        this.$router.push({
          path: "/addGoodMoney?project_id=" + Utils.GetQueryString("project_id")
        })
      },
      addExpend() {
        this.$router.push({
          path: "/moneyApply?project_id=" + Utils.GetQueryString("project_id")
        })
      },
      setIncome(id, state) {
        //console.log("id:"+id + "state: " +state)

        this.$router.push({
          path: "shenpiIncome?id=" + id + "&state=" + state + "&project_id=" + Utils.GetQueryString("project_id")
        })
      },
      setExpend(id, state) {
        this.$router.push({
          path: "shenpiExpense?id=" + id + "&state=" + state + "&project_id=" + Utils.GetQueryString("project_id")
        })
      },
      beforeUploads(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      doPut(option) {
        let file = option.file
        let OSS = require('ali-oss');
        this.$post({
          url: "sts/sign"
        }).then(res => {
          let ossClient = new OSS({
            region: 'oss-cn-qingdao',
            accessKeyId: res.accessKeyId,
            accessKeySecret: res.accessKeySecret,
            stsToken: res.securityToken,
            bucket: 'lius-1'
          })
          ossClient.put("imgs/" + (new Date()).getTime() + ".jpg", file).then(res => {
            this.project.approveUrl = res.url
          })
        }).catch(err => {
          console.log(err)
        })
      },
      pass(){
        let _this = this
        this.$post({
          url : "project/admin/pass",
          data : {
            id : _this.project.id,
            url : _this.project.approveUrl
          }
        }).then(res =>{
          alert("审核通过！")
          this.getData()
        })
      },
      close_project(){
        this.$router.push({
          path : 'closeProject?project_id=' + this.project.id
        })
      }
    },
    components: {},
    mounted() {
      this.getData()
      this.power = this.$store.getters.getPower
    },
    computed: {}
  }
</script>

<style scoped>
  .ss {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .avatar-uploader {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 20px;
  }

  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    left: auto;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    margin-left: -30px;
  }

  .top {
    margin-top: 10px;
  }

</style>
